<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户编辑页</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <link rel="stylesheet" href="/stylesheets/base.css">
  <script src="/layui/layui.js"></script>
  <script src="/javascripts/jquery.js"></script>
  <script src="/javascripts/ajax.js"></script>
</head>
<body>
<form id="editForm" class="layui-form" style="margin: 10px">
  <input type="hidden" id="id" name="id">
  <div class="layui-form-item">
    <label class="layui-form-label" for="username"><span class="red">*</span>用户名</label>
    <div class="layui-input-block">
      <input type="text" name="username" id="username" placeholder="请输入用户名" class="layui-input" lay-verify="required">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label" for="nickname"><span class="red">*</span>昵称</label>
    <div class="layui-input-block">
      <input type="text" name="nickname" id="nickname" placeholder="请输入昵称" class="layui-input" lay-verify="required">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label" for="phone"><span class="red">*</span>手机号</label>
    <div class="layui-input-block">
      <input type="text" name="phone" id="phone" placeholder="请输入手机号" class="layui-input" lay-verify="required|phone">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label" for="sex"><span class="red">*</span>性别</label>
    <div class="layui-input-block">
      <select name="sex" id="sex">
        <option value="1">男</option>
        <option value="2">女</option>
        <option value="3">未设置</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label" for="role"><span class="red">*</span>角色</label>
    <div class="layui-input-block">
      <select name="role" id="role">
        <option value="1" disabled>管理员</option>
        <option value="2">负责人</option>
        <option value="3">操作员</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label" for="avatar"><span class="red">*</span>头像</label>
    <input type="hidden" name="avatar" id="avatar">
    <div class="layui-input-block">
      <div class="upload-group">
        <div class="upload-btn">
          <button type="button" class="layui-btn layui-bg-orange" id="uploadBtn">上传头像</button>
        </div>
        <div class="image-group" id="avatarDiv">

        </div>
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label"></label>
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" lay-filter="submitBtn" lay-submit>提交</button>

    </div>
  </div>
</form>
</body>
<script>
  const {upload,form} = layui;
  $(function () {
    const id = location.search.substring(location.search.indexOf("=")+1);
    if(id){
      ajax.get("/userinfo/info/"+id).then(userinfo=>{
        $("#editForm input,select,textarea").each((index,item)=>{
          const name = $(item).prop("id");
          for(let key in userinfo){
            if(name === key){
              $("#"+name).val(userinfo[key]);
            }
          }
        })
        $("#username").prop("readonly",true);
        if(userinfo.role === 1){
          $("#role").prop("disabled",true);
        }
        createAvatar(userinfo.avatar)
        form.render();
      })
    }

    upload.render({
      elem:"#uploadBtn",
      url:"/upload",
      data:{type:"avatar"},
      done(res){
        if(res.code === 200){
          createAvatar(res.data)
        }else{
          layer.msg('上传失败！',{icon:5})
        }
      }
    });

    form.on("submit(submitBtn)",function (data) {
      ajax.post("/userinfo/update",data.field).then(()=>{
        layer.alert(`${id?"修改":"添加"}成功！`,{icon:6},function (){
          closeWin();
          parent.reloadTable();
        })
      })
      return false;
    })
  })

  function createAvatar(src) {
    $("#avatar").val(src);
    $("#avatarDiv").empty().append(`<div class="image-item">
            <div class="image-view">
              <img src="${src}" alt="">
            </div>
            <div class="image-opt">
              <i class="layui-icon layui-icon-search" onclick="showImage(this)"></i>
<!--              <i class="layui-icon layui-icon-delete"></i>-->
            </div>
          </div>`)
  }

  function showImage(_this) {
    const src = $(_this).parents(".image-item").find("img").prop("src");
    layer.photos({
      photos:{
        data:[{
          src
        }]
      }
    })
  }

  function closeWin() {
    const index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
    parent.layer.close(index);
  }
</script>
</html>
